<template>
      <el-form :inline="true">
      <el-form-item label="供应商名称">
      <el-input placeholder="请输入供应商名称" />
    </el-form-item>
    <el-button type="primary">查询</el-button>
    
  </el-form>
    <div class="common-layout">
      <el-container>
        <el-aside width="200px" >
            <el-tree-select v-model="value" :data="data" style="width: 240px" />
        </el-aside>
        <el-container>
          <el-main>
      <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="vendor_Name" label="供应商名称" width="120" />
      <el-table-column prop="vendor_LogisticsCmp" label="供应商物流公司" width="120" />
      <el-table-column prop="vendor_Code" label="供应商编码" width="120" />
      <el-table-column prop="vendor_FullAddress" label="详细地址" width="120" />
      <el-table-column prop="vendor_Zip" label="邮编" width="120" />
      <el-table-column prop="vendor_Contact" label="联系人" width="120" />
      <el-table-column prop="vendor_LandlineNumber" label="固定电话" width="120" />
      <el-table-column prop="vendor_Phone" label="电话" width="120" />
      <el-table-column prop="vendor_Fax" label="传真" width="120" />
      <el-table-column prop="vendor_Email" label="邮箱" width="120" />
      <el-table-column prop="vendor_Remark" label="备注" width="120" />
      <el-table-column prop="address" label="操作">
        <template  v-slot="scope">
        <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
        <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
      </template>
      </el-table-column>
    </el-table>
<div>
    <el-pagination
      v-model:current-page="page.pageIndex"
      v-model:page-size="page.pageSize"
      :page-sizes="[10, 30, 20,]"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.totalCount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      prev-text="上一页" next-text="下一页"
      />
</div>
    </el-main>
        </el-container>
      </el-container>
    </div>
    <div>
      <el-dialog v-model="logic.isOpan" title="编辑供应商" width="500">
    <el-form :model="form">
      <el-form-item label="供应商名称">
        <el-input v-model="form.vendor_Name" />
      </el-form-item>
      <el-form-item label="供应商物流公司">
        <el-input v-model="form.vendor_LogisticsCmp" />
      </el-form-item>
      <el-form-item label="供应商编码">
        <el-input v-model="form.vendor_Code" />
      </el-form-item>
      <el-form-item label="区域编号">
        <el-input v-model="form.vendor_AddressId" />
      </el-form-item>
      <el-form-item label="详细地址">
        <el-input v-model="form.vendor_FullAddress" />
      </el-form-item>
      <el-form-item label="邮编">
        <el-input v-model="form.vendor_Zip" />
      </el-form-item>
      <el-form-item label="联系人">
        <el-input v-model="form.vendor_Contact" />
      </el-form-item>
      <el-form-item label="固定电话">
        <el-input v-model="form.vendor_LandlineNumber" />
      </el-form-item>
      <el-form-item label="电话">
        <el-input v-model="form.vendor_Phone" />
      </el-form-item>
      <el-form-item label="传真">
        <el-input v-model="form.vendor_Fax" />
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="form.vendor_Email" />
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="form.vendor_Remark" />
      </el-form-item>
      <!-- <el-form-item label="Zones">
        <el-select v-model="form.region" placeholder="Please select a zone">
          <el-option label="Zone No.1" value="shanghai" />
          <el-option label="Zone No.2" value="beijing" />
        </el-select>
      </el-form-item> -->
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="logic.isOpan = false">取消</el-button>
        <el-button type="primary" @click="handleAddOrEdit">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { ref,onMounted,reactive } from 'vue'
  import axios from 'axios'
  import { ElMessage, ElMessageBox } from 'element-plus'
  
  //逻辑
const logic =reactive({
    isOpan:false,
    Add:true,
})

const form = reactive({
  vendor_Id: "",
  vendor_Name: "",
  vendor_LogisticsCmp: "",
  vendor_Code: "",
  vendor_AddressId: "",
  vendor_FullAddress: "",
  vendor_Zip: "",
  vendor_Contact: "",
  vendor_LandlineNumber: "",
  vendor_Phone: "",
  vendor_Fax: "",
  vendor_Email: "",
  vendor_Remark: ""
})

  //供应商编辑
  const handleEdit = (row: any) => {
    logic.isOpan = true
    form.vendor_Id = row.vendor_Id
    form.vendor_Name = row.vendor_Name
    form.vendor_LogisticsCmp = row.vendor_LogisticsCmp
    form.vendor_Code = row.vendor_Code
    form.vendor_AddressId = row.vendor_AddressId
    form.vendor_FullAddress = row.vendor_FullAddress
    form.vendor_Zip = row.vendor_Zip
    form.vendor_Contact = row.vendor_Contact
    form.vendor_LandlineNumber = row.vendor_LandlineNumber
    form.vendor_Phone = row.vendor_Phone
    form.vendor_Fax = row.vendor_Fax
    form.vendor_Email = row.vendor_Email
    form.vendor_Remark = row.vendor_Remark
  }
  //供应商编辑
  const handleAddOrEdit = () => {
    if (logic.Add) {
      axios.post("http://localhost:5259/api/Vendor/UpdVendor", form)
       .then(res => {
          if (res.data.code == 200) {
            ElMessage.success(res.data.message);
          }
          // 只有在操作成功或失败后，才需要重新获取数据
          Show();
          logic.isOpan = false
        })
       .catch(error => {
          // 添加适当的错误处理机制
          console.error("添加供应商时发生错误:", error);
          ElMessage.error("添加操作过程中发生错误");
        });
    }
    //  else {
    //   axios.post("http://localhost:5259/api/Vendor/EditVendor", form)
    //    .then(res => {
    //       if (res.data.code != 200) {
    //         ElMessage.success(res.data.message);
    //       }
    //       // 只有在操作成功或失败后，才需要重新获取数据
    //       Show();
    //       logic.isOpan = false
    //     })
    //    .catch(error => {
    //       // 添加适当的错误处理机制
    //       console.error("编辑供应商时发生错误:", error);
    //       ElMessage.error("编辑操作过程中发生错误");
    //     });
    // }
  }



 const page=reactive({
    pageIndex:1,
    pageSize:10,
    totalCount:0,
    totalPage:0,
 })
  //住宅供应商列表
  const tableData = ref([])
  //供应商
  onMounted(() => {
    Show()
  })
  //查询显示
  const Show = () => {
    axios.get('http://localhost:5115/api/Vendor/GetVendor',
        {
            params: {
                pageIndex: page.pageIndex,
                pageSize: page.pageSize,
            },
        }
    ).then(res => {
      tableData.value = res.data.data.data
      page.totalCount = res.data.data.totalCount
      page.totalPage = res.data.data.totalPage
    })
  }
  //分页
  const handleSizeChange = (val: number) => {
  page.pageSize = val
  Show()
}
const handleCurrentChange = (val: number) => {
  page.pageIndex = val
  Show()
}

// 删除供应商
const handleDelete = (row: any) => {
  ElMessageBox.confirm(
    '确定删除吗?',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    axios.post("http://localhost:5259/api/Vendor/DelVendor", row)
      .then(res => {
       if(res.data.code!=200)
       {
         ElMessage.success(res.data.message);
       }
        // 只有在操作成功或失败后，才需要重新获取数据
        Show();
      })
      .catch(error => {
        // 添加适当的错误处理机制
        console.error("删除供应商时发生错误:", error);
        ElMessage.error("删除操作过程中发生错误");
      });
  })
  .catch(() => {
    ElMessage({
      type: 'info',
      message: '取消操作',
    });
  });
}
  interface Tree {
  label: string
  children?: Tree[]
}

const value = ref()

const data = [{
    value: '0',
    label: '中国',
    children: [
      {
        value: '1',
        label: '江西',
        children: [
          {
            value: '2',
            label: '上饶',
            children: [
          {
            value: '3',
            label: '鄱阳',
          },
        ],
          },
        {
            value: '2',
            label: '南昌',
            children: [
          {
            value: '3',
            label: '绕铺',
          },
        ],
        }
        ],
      },
    ],
  },
]
</script>